<template>
	<view style="margin-left: 20px; margin-right: 10px;">
		<up-navbar @leftClick="leftClick" safeAreaInsetTop placeholder>
			<template #right>
				<up-text text="确定" type="primary" @click="saveInput"></up-text>
			</template>
		</up-navbar>
		<div class="title">
			<up-text text="工作内容" size="30px" :bold="true"></up-text>
			<up-text text="请简述工作背景,曾负责的工作内容,克服过的困难,取得的工作成果." style="margin-top: 5px;"></up-text>
			<div class="container">
				<textarea ref="textarea" v-model="value" maxlength="1000" :autoHeight="true" class="fullscreen-textarea"
					placeholder="请输入内容" @input="updateCharacterCount">
				</textarea>
				<div class="char-count">{{ characterCount }}/1000</div>
			</div>
		</div>
		<up-modal :content="content" :show="show" showCancelButton closeOnClickOverlay @confirm="confirm"
			@cancel="cancel" @close="show = false" contentTextAlign="center"></up-modal>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			console.log(options.jobContentByWorkE)
			if (options.jobContentByWorkE != '请输入内容') {
				this.value = options.jobContentByWorkE;
			}
		},
		data() {
			return {
				value: '',
				characterCount: 0,
				show: false,
				content: '是否保存编辑内容？'
			}
		},
		methods: {
			//返回
			leftClick() {
				this.show = true;
			},
			//判断框取消
			cancel() {
				// uni.navigateBack();
				uni.setStorageSync('jobContent', 'cancel');
				uni.navigateBack();
			},
			//判定框确定
			confirm() {
				this.saveInput();
			},
			saveInput() {
				//传回输入值  
				console.log("输入的内容:", this.value);
				uni.setStorageSync('jobContent', this.value);
				uni.navigateBack();
			},
			updateCharacterCount() {
				// 更新字数统计  
				this.characterCount = this.value.length;
				if (this.characterCount > 1000) {
					this.value = this.value.slice(0, 1000); // 限制输入为1000字  
					this.characterCount = 1000; // 更新字数统计为1000  
				}
			},
		},
	}
</script>

<style>
	.title {
		/* margin-top: 50px; */
		/* border: 1px solid red; */
		height: 100px;
	}

	.container {
		position: relative;
		width: 100%;
		height: calc(100vh - 150px);
		/* 上部的标题和导航高度调节 */
		margin: 0;
		padding: 0;
		overflow: hidden;
		margin-top: 10px;
		margin-left: -8px;
	}

	.fullscreen-textarea {
		width: 100%;
		height: 100%;
		border: none;
		resize: none;
		box-shadow: none;
		outline: none;
		padding: 10px;
		/* 添加内边距使文本舒适 */
	}

	.char-count {
		position: absolute;
		bottom: 10px;
		/* 距离底部10px */
		right: 10px;
		/* 距离右侧10px */
		color: #999;
		/* 字数显示样式 */
	}
</style>